<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" th:href="@{/bootstrap-4.6.0-dist/css/bootstrap.min.css}">
	<link rel="stylesheet" th:href="@{/bootstrap-4.6.0-dist/css/bootstrap-icons.css}">
	<script th:src="@{/js/jquery.min.1.10.2.js}"></script>
	<style type="text/css">
		a{
			color:#000;
		}
		a:hover{
			color: #000;
			text-decoration: none;
		}
		nav{
			background: #007bff!important;
		    color: #fff;
		    height: 55px;
		    line-height: 55px;
		}
		nav>a:hover{
			color: #fff;
			text-decoration: none;
		}
		nav>a{
			color: #fff;
		    display: inline-block;
		    font-size: 19px;
		    width: 200px;
		    text-align: center;
		}
		nav .loginfo{
			float: right;
		}
		.loginfo span{
			display: inline-block;
		}
		.loginfo a{
			color: #fff;
		}
		/*----------*/
		.navleft{
			position: absolute;
			top: 55px;
			bottom: 0px;
			width: 200px;
			left: 0;
			border-right: 1px solid #f3f3f3;
		}
		.navleft  .info{
			text-align: center;
			margin: 25px 0;
		}
		.info img{
			width: 80px;
		}
		
		.items{
			color: #212529;
		    line-height: 50px;
		    margin: 0px 10px 0px 25px;
		}
		.fu{
    		border-bottom: 1px dashed #ddd;
    		cursor: pointer;
    		user-select:none;
		}
		.navleft ul{
			list-style: none;
			padding: 0;
			margin: 0;
			font-size: 14px;
    		display: none;
		}
		.items a{
			display: block;
		}
		.items a.active{
			color: #007bff;
    		background: #f3f3f3;
		}
		.items a:hover{
			color:#007bff;
		}
		
		.navleft li a{
			padding-left:10px;
		}
		
		.fu .bi:first-child{
			margin-right: 5px;
		}
		.fu .bi:last-child{
			float: right;
			font-size: 22px;
		}
		.fu .bi{
			transition: transform ease-in-out 0.2s;
		}
		.rotate90{
			transform: rotate(90deg);
		}
		/*----------*/
		.navright{
			position: absolute;
			left: 201px;
			right: 0px;
			top: 55px;
			bottom: 0px;
		}
	</style>
</head>
<body>
<!-- 顶部导航 -->
<nav>
  <a class="title" href="#">
  	<i class="bi bi-columns-gap"></i>
  	在线考试系统
  </a>
  <div class="loginfo">
    <span >欢迎，[[${session.loginUser.name}]]</span>
    <a class="btn btn-link" href="#" title="登出">
    	<i class="bi bi-arrow-down-left-square"></i></a>
  </div>
</nav>

<div class="navleft">
	<div class="info">
		<img th:src="@{/imgs/1.png}" alt="">
		<div>[[${session.loginUser.name}]]</div>
	</div>
	<div class="items">
		<div>
			<div class="fu">
				<i class="bi bi-diagram-3"></i>
				<span>基础信息管理</span>
				<i class="bi bi-arrow-right-short"></i>
			</div>
			<ul>
				<li><a href="list.html" target="main">学院信息</a></li>
				<li><a href="#">专业信息</a></li>
				<li><a href="#">班级信息</a></li>
				<li><a href="#">学生信息</a></li>
			</ul>
		</div>
		<div>
			<div class="fu">
				<i class="bi bi-file-ppt"></i>
				<span>考试管理</span>
				<i class="bi bi-arrow-right-short"></i>
			</div>
			<ul>
				<li><a href="my_exam.html" target="main">试卷管理</a></li>
				<li><a href="#">试卷提交</a></li>
			</ul>
		</div>
		<div>
			<a class="fu" href="#">
				<i class="bi bi-newspaper"></i>
				<span>统计与分析</span>
			</a>
		</div>
		<div>
			<a class="fu" href="#">
				<i class="bi bi-person-square"></i>
				<span>个人中心</span>
			</a>
		</div>
	</div>
</div>


<div class="navright">
	<iframe id="main" name="main" src="" frameborder="0" width="100%" height="100%" ></iframe>
</div>

<script>

$('div.fu').click(function(event) {
	if($(this).hasClass('active')){
		$(this).removeClass('active');
		$(this).find('.bi-arrow-right-short').removeClass('rotate90');
		$(this).next().slideUp();
	}else{
		$(this).addClass('active');
		$(this).find('.bi-arrow-right-short').addClass('rotate90');
		$(this).next().slideDown();
	}
});
$('.items a').click(function () {
	 $('.items a').removeClass('active');
	 $(this).addClass('active');
})

</script>


</body>
</html>